<template>
    <div class="home">
        <div class="banner">
            <div class="register_card">
               <h1>1分钟注册，快速脱单</h1>
                <div class="form_box">
                    <el-form ref="form" :model="form" label-width="50px">
                        <el-form-item label="性别:" style="text-align: left">
                            <el-radio-group v-model="form.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="生日:">
                            <dateBox ></dateBox>
                        </el-form-item>
                        <el-form-item label="地区:">
                            <city ></city>
                        </el-form-item>
                        <el-form-item label="婚姻:">
                            <el-select v-model="form.value" placeholder="请选择">
                                <el-option
                                        label="请选择"
                                        value="">
                                </el-option>
                                <el-option
                                        label="未婚"
                                        value="1">
                                </el-option>
                                <el-option
                                        label="离异"
                                        value="2">
                                </el-option>
                                <el-option
                                        label="丧偶"
                                        value="3">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="btn_box">
                            <el-button type="primary" style="width: 100%" >快速注册</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-carousel :interval="4000"  height="442px">
                <el-carousel-item >
                    <img src="../../assets/image/home/267892421e9b94c4.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="../../assets/image/home/banner1.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="../../assets/image/home/267892421e9b94c4.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="../../assets/image/home/banner1.jpg" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="search_box">
          <div class="search_content">
              <h1>我要找</h1>

                   <el-form :inline="true" :model="formInline" class="demo-form-inline">
                       <el-form-item label="性别">
                           <el-select v-model="formInline.region" placeholder="请选择性别" style="width: 80px">
                               <el-option label="不限" value=""></el-option>
                               <el-option label="男" value="1"></el-option>
                               <el-option label="女" value="0"></el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="年龄" >
                           <div class="age">

                                   <el-select v-model="formInline.ageStart" placeholder="请选择年龄"  style="width: 120px" @change="ageStartFun">
                                       <el-option label="不限" value=""></el-option>
                                       <el-option v-for="item in ageStart" :key="item" :label="item" :value="item"></el-option>

                                   </el-select>
                                  <span style="margin:0 10px">~</span>
                                   <el-select v-model="formInline.ageEnd" placeholder="请选择年龄" style="width: 120px" @change="ageEndFun">
                                       <el-option label="不限" value=""></el-option>
                                       <el-option v-for="item in ageEnd" :key="item" :label="item" :value="item"></el-option>

                                   </el-select>

                           </div>
                       </el-form-item>
                       <el-form-item label="地区">
                           <city ></city>
                       </el-form-item>
                       <el-form-item >
                           <el-checkbox v-model="formInline.checked">新人</el-checkbox>
                       </el-form-item>
                       <el-form-item>
                           <el-button type="primary" >查询</el-button>
                       </el-form-item>
                   </el-form>

          </div>
        </div>
        <div class="person_list">
           <div class="person_list_item">
             <header>
<!--                 https://www.biyiai.com/up/p/m/2017/05/101537_b_1576567702_m.jpg-->
                 <h2>
                     <i class="iconfont icon-01_huiyuandengjiguanli"></i>
                     推荐征婚会员
                 </h2>
                 <el-tabs v-model="activeName" @tab-click="handleClick">
                     <el-tab-pane label="今日之星" name="1"></el-tab-pane>
                     <el-tab-pane label="同城会员" name="2"></el-tab-pane>
                     <el-tab-pane label="匹配我的" name="3"></el-tab-pane>
                     <el-tab-pane label="VIP" name="4"></el-tab-pane>
                     <el-tab-pane label="查看更多" name="5"></el-tab-pane>
                 </el-tabs>

             </header>
               <div class="today_start">
                   <div class="tab_item">
                       <p class="images_box">
                           <img src="https://www.biyiai.com/up/p/m/2017/05/101537_b_1576567702_m.jpg" alt="">
                       </p>
                       <p class="level">
                           <i class="iconfont icon-xingji"></i>
                           <span>名称</span>
                       </p>
                       <p class="person_message">
                           <span>25岁</span><span>工程师</span><span>保定定兴县</span>
                       </p>
                   </div>
               </div>
           </div>
        </div>
    </div>
</template>

<script>
    import dateBox from "../../components/dateBox";
    import city from "../../components/city";
    export default {
        name: "index",
        data() {
            return {
                banner:[''],
                activeName:"1",
                ageStart:[],
                ageEnd:[],
                form:{},
                formInline:{
                    region:"",
                    ageStart:"",
                    ageEnd:""
                },
                pickerOptions:{
                    disabledDate(time) {
                        return time.getTime() > new Date('2003-05-24');
                    },
                },

            }
        },
        components: {
            dateBox,
            city
        },
        computed:{

        },
        mounted() {
          this.getAgeFun()
        },
        methods: {
            //tab切换
            handleClick(val){
                console.log(val)
            },
            //选择开始年龄
            ageStartFun(val){
                if(!this.formInline.ageEnd){
                    this.ageEnd=[];
                    for (let i=val;i<=60;i++){
                        this.ageEnd.push(i)
                    }
                }

            },
            //年龄结束
            ageEndFun(val){
                if(!this.formInline.ageStart){
                    this.ageStart=[];
                    for (let i=18;i<=val;i++){
                        this.ageStart.push(i)
                    }
                }

            },
           getAgeFun(){
               for (let i=18;i<=60;i++){
                   this.ageStart.push(i)
               }
               this.ageEnd=this.ageStart;
           }
        }
    }
</script>
<style>
    .banner .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    .btn_box .el-form-item__content{
        margin-left: 0!important;
    }

</style>
<style scoped lang="scss">
    @import "../../styles/comment.scss";
    .person_list{
        width: 100%;
        height: auto;
        background: #fff;
        .person_list_item{
            width: $width;
            border-radius: 10px;
            margin:0 auto;
            margin-top: 20px;
            padding:10px 20px 10px 20px;
            .today_start{
                width: 100%;
                .tab_item{
                    width: 200px;
                    height: 320px;
                    .images_box{

                    }
                }
            }
            header{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .el-tabs__header{
                    margin:0;
                }
                h2{
                    font-size: 18px;
                    line-height: 30px;
                    margin-right: 20px;
                    i{
                        color: $backgroundColor;
                        font-size:26px;
                    }
                }
            }

        }
    }
    .search_box{
        width: 100%;
        height: 80px;
        background: #fff;
        .search_content{
            width:$width;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
           .el-form-item{
               margin-bottom: 0;

           }
            h1{
                display: inline-block;
                font-size: 22px;
                color: #666!important;
                line-height: 80px;
                padding-left: 10px;
                margin-right: 20px;
            }
        }
    }
 .banner{
     width: 100%;
     height: 442px;
     position: relative;
     .register_card{
         position: absolute;
         width: 360px;
         height: 384px;
         margin-left: 240px;
         top: 30px;
         left: 50%;
         right: 0;
         background-color: #fff;
         box-sizing: border-box;
         border-radius: 10px;
         padding-left: 50px;
         padding-right: 50px;
         z-index: 1000;
         padding-top: 30px;


         h1{
             font-size: 20px;
             line-height: 40px;
             text-align: center;
             padding-bottom: 20px;
         }
     }
 }
</style>
